<template>
  <div class="setModel">
    <zyModel title="研判权重设置" :show="show" @close="close" @submit="submit" width="1200">
      <div class="model-table-box">
        <!--    筛选条件-->
        <div class="search-box">
          <div class="search-item">
            <div class="search-label">高危人员权重</div>
            <zy-input v-model="form.subsidiary1" type="rate" placeholder="请输入高危人员权重" :clearable="true"></zy-input>
            %
          </div>
          <div class="search-item">
            <div class="search-label">高危物品权重</div>
            <zy-input v-model="form.subsidiary2" type="rate" placeholder="请输入高危物品权重" :clearable="true"></zy-input>
            %
          </div>
          <div class="search-item">
            <div class="search-label">高危线路权重</div>
            <zy-input v-model="form.subsidiary3" type="rate" placeholder="请输入高危线路权重" :clearable="true"></zy-input>
            %
          </div>
          <div class="search-item">
            <div class="search-label">高危电话权重</div>
            <zy-input v-model="form.subsidiary4" type="rate" placeholder="请输入高危电话权重" :clearable="true"></zy-input>
            %
          </div>
          <div class="search-item">
            <div class="search-label">高危行为权重</div>
            <zy-input v-model="form.subsidiary5" type="rate" placeholder="请输入高危行为权重" :clearable="true"></zy-input>
            %
          </div>
        </div>
        <div class="tips">注：五项权重设置之和不能超过100%。</div>
        <!--    列表-->
        <div class="tableBox" :loading="personnelLoading">
          <div class="pageTitle">
            <div class="title">研判结果设置</div>
            <zy-button @click="addTr" :disabled="parseFloat(list[list.length - 1].end_score) >= 100">
              加行
            </zy-button>
          </div>
          <div class="head tr">
            <div class="index">序号</div>
            <div class="interval">分值区间</div>
            <div class="color">颜色标记</div>
            <div class="dubious">是否标记可疑件</div>
            <div class="early_type">预警方式</div>
            <div class="police_ids">预警人员</div>
            <div class="btnArea">操作</div>
          </div>
          <div class="tr" v-for="(item,index) in list" :key="index">
            <div class="index">{{index+1}}</div>
            <div class="interval">
              <zy-input v-model="item.start_score" size="mini" type="rate" disabled></zy-input>
              <span class="unit"> ≤ X < </span>
              <zy-input v-model="item.end_score" size="mini" type="rate"
                        :disabled="index < list.length-1"></zy-input>
              <span class="unit">分</span>
            </div>
            <div class="color">
              <el-color-picker v-model="item.color" :disabled="index < list.length-1"></el-color-picker>
            </div>
            <div class="dubious">
              <el-select v-model="item.is_dubious" placeholder="请选择" :disabled="index < list.length-1">
                <el-option v-for="option in optionList" :key="option.value" :label="option.label"
                           :value="option.value"></el-option>
              </el-select>
            </div>
            <div class="early_type">
              <el-checkbox-group v-model="item.early_type" :disabled="index < list.length-1">
                <el-checkbox label="1">站内信</el-checkbox>
                <el-checkbox label="2">短信</el-checkbox>
              </el-checkbox-group>
            </div>
            <div class="police_ids">
              <el-select v-model="item.police_ids" placeholder="请选择" type="selectMultiple" filterable multiple
                         :disabled="index < list.length-1">
                <el-option v-for="option in policeList" :key="option.value" :label="option.label"
                           :value="option.value"></el-option>
              </el-select>
            </div>
            <div class="btnArea">
              <zy-button text-button mini v-if="index==list.length-1" @click="clear">清空</zy-button>
              <zy-button text-button mini type="danger" class="delBtn" v-if="index==list.length-1"
                         @click="deleted(index)">删除
              </zy-button>
            </div>
          </div>
        </div>
      </div>
    </zyModel>
  </div>
</template>

<script>
	export default {
		name: "setModel",
		props: {
			show: {
				type: Boolean,
				default: () => false
			}
		},
		data() {
			return {
				form: {
					subsidiary1: '',
					subsidiary2: '',
					subsidiary3: '',
					subsidiary4: '',
					subsidiary5: '',
				},
				personnelLoading: false,
				list: [
					{
						start_score: 0,
						end_score: '',
						color: '',
						is_dubious: '',
						early_type: [],
						police_ids: []
					}
				],
				optionList: [
					{label: '是', value: '1'},
					{label: '否', value: '0'},
				],
				policeList: [],
			};
		},
		computed: {},
		watch: {},
		components: {},
		methods: {
			getPoliceData() {
				this.$axios.post(this.$api.g_listContactPolice, {
					pagination: {
						page_start: 1,
						page_size: 9999
					}
				}).then(res => {
					let {code, msg, data} = res;
					if (code == 200) {
						this.policeList = data.list.filter(item => {
							item.value = String(item.id);
							item.label = item.name
							return item;
						})
					} else {
						this.$message.error(msg);
					}
				}).catch(ret => {
					this.$message.error(ret.msg || '服务繁忙，请稍后再试');
				});
			},
			close(isRefresh) {
				this.$emit('close', isRefresh)
			},
			submit() {
				let subsidiary = 0, postData = {...this.form}, list = JSON.parse(JSON.stringify(this.list)),
					item = list[list.length - 1];
				if (!item.end_score.length || parseFloat(item.end_score) < parseFloat(item.start_score))
					return this.$message.error('请重新设置分值区间')
				if (!item.color.length)
					return this.$message.error('请选择标记颜色')
				if (!item.is_dubious)
					return this.$message.error('请选择是否标记可疑件')
				for (let key in this.form) {
					subsidiary += parseFloat(this.form[key])
				}
				if (!this.form.subsidiary1) {
					return this.$message.error('请输入高危人员权重')
				}
				if (!this.form.subsidiary2) {
					return this.$message.error('请输入高危物品权重')
				}
				if (!this.form.subsidiary3) {
					return this.$message.error('请输入高危线路权重')
				}
				if (!this.form.subsidiary4) {
					return this.$message.error('请输入高危电话权重')
				}
				if (!this.form.subsidiary5) {
					return this.$message.error('请输入高危行为权重')
				}
				if (subsidiary > 100) {
					return this.$message.error('综合研判五项权重之和不可超过100%')
				}
				if (parseFloat(this.list[this.list.length - 1].end_score) < 100) {
					return this.$message.error('请加行设置研判结果')
				}
				list.forEach(item => {
					item.early_type = item.early_type.length ? item.early_type.join() : ''
					item.police_ids = item.police_ids.length ? item.police_ids.join() : ''
				})
				postData['research_judge_list'] = list;
				console.log(postData)
				this.$axios.post(this.$api.g_researchJudgeAdd, {...postData}).then(res => {
					let {code, msg, data} = res;
					if (code == 200) {
						this.close(true)
					} else {
						this.$message.error(msg);
					}
				}).catch(ret => {
					this.$message.error(ret.msg || '服务繁忙，请稍后再试');
				});
			},
			addTr() {
				let list = JSON.parse(JSON.stringify(this.list)),
					item = list[list.length - 1];
				if (!item.end_score.length || parseFloat(item.end_score) < parseFloat(item.start_score))
					return this.$message.error('请重新设置分值区间')
				if (!item.color.length)
					return this.$message.error('请选择标记颜色')
				if (!item.is_dubious)
					return this.$message.error('请选择是否标记可疑件')
				this.list.push({
					start_score: list[list.length - 1].end_score,
					end_score: '',
					color: '',
					is_dubious: '',
					early_type: [],
					police_ids: []
				})
			},
			deleted(index) {
				if (index > 0)
					this.list.splice(index, 1)
			},
			clear() {
				let list = JSON.parse(JSON.stringify(this.list))
				if (this.list.length > 1) {
					this.list = list.filter((item, index) => {
						if (index == list.length - 1) {
							item.start_score = list[list.length - 2].end_score || 0;
							item.end_score = ''
							item.color = '';
							item.is_dubious = ''
							item.early_type = []
							item.police_ids = []
						}
						return item;
					})
				} else {
					this.list = [{
						start_score: 0,
						end_score: '',
						color: '',
						is_dubious: '',
						early_type: [],
						police_ids: []
					}]
				}
			},
			getData() {
				this.$axios.post(this.$api.g_getresearchJudge, {}).then(res => {
					let {code, msg, data} = res;
					if (code == 200) {
						this.form = {
							subsidiary1: data.dict.subsidiary1 || '',
							subsidiary2: data.dict.subsidiary2 || '',
							subsidiary3: data.dict.subsidiary3 || '',
							subsidiary4: data.dict.subsidiary4 || '',
							subsidiary5: data.dict.subsidiary5 || '',
						}
						this.list = data.list && data.list.length ? data.list.filter(item => {
							item.early_type = item.early_type.split(',') || '';
							item.police_ids = item.police_ids.split(',') || ''
							item.is_dubious = String(item.is_dubious)
							return item;
						}) : [{
							start_score: 0,
							end_score: '',
							color: '',
							is_dubious: '',
							early_type: [],
							police_ids: []
						}]
					} else {
						this.$message.error(msg);
					}
				}).catch(ret => {
					console.log(ret)
					this.$message.error(ret.msg || '服务繁忙，请稍后再试');
				});
			},
		},
		mounted() {
			this.getPoliceData();
			this.getData()
		},
		created() {
		}
	}
</script>

<style scoped lang="less">
  @import "../../../../style/common/common";

  @FAgentBgColor: #F5F7F8;
  @FAgentHoverBgColor: rgba(245, 247, 248, 0.6);
  @rateBorderColor: rgba(187, 185, 199, 0.19);

  .model-table-box {

    .search-box {
      display: flex;
      align-items: center;
      padding: 0 24px;
      flex-wrap: wrap;

      .search-item {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
        margin-right: 20px;

        .search-label {
          font-size: 14px;
          color: @fontColor;
          margin-right: 8px;
          flex: 0 0 90px;
        }

        .zy-input {
          width: 240px;
          height: 40px;
          margin-right: 5px;
          border-radius: 4px;

          .el-input__inner {
            flex: 1;
            background: rgba(216, 216, 216, 0);
            border-radius: 4px;
            border: 1px solid #C7CBD1;
            color: @fontColor;
          }
        }
      }

    }

    .tips {
      padding-left: 20px;
      font-size: 14px;
      color: @allWarringColor;
    }

    .tableBox {
      .pageTitle {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
        margin-bottom: 10px;

        .title {
          line-height: 20px;
          font-size: 16px;
          font-weight: bold;
        }
      }

      .pageTitle::after {
        content: '';
        position: absolute;
        top: 8px;
        bottom: 8px;
        left: -12px;
        width: 4px;
        background: @allWarringColor;
      }

      .tr {
        display: flex;
        align-items: center;
        padding: 16px 0;
        border-bottom: 1px solid @rateBorderColor;

        &.head {
          color: @fontGrayColor;

          .interval, .color, .dubious, .early_type, .police_ids {
            // border-right: 1px solid @rateBorderColor;
          }
        }

        &:nth-child(2n) {
          background: @FAgentBgColor;
        }

        &:hover {
          background: @FAgentHoverBgColor;
        }

        .index {
          flex: 0 0 48px;
          display: flex;
          justify-content: center;
          align-items: center;
          border-right: 1px solid @rateBorderColor;
        }


        .interval, .color, .dubious, .early_type, .police_ids {
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 0 12px;

          &.interval {
            flex: 1;

            .unit {
              margin: 4px;
              font-size: 12px;
              flex: 0 0 40px;
            }
          }

          &.color {
            flex: 0 0 90px;
          }

          &.dubious {
            flex: 0 0 130px;
          }

          &.early_type {
            flex: 0 0 200px;

            .el-checkbox {
              margin-right: 20px;
            }
          }

          &.police_ids {
            flex: 0 0 260px;
          }

        }

        .btnArea {
          flex: 0 0 100px;
          display: flex;
          align-items: center;

          .delBtn {
            margin-left: 8px;
          }
        }
      }
    }
  }


</style>
